<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="380"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Function to draw an arrow
        function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            
            // Arrowhead
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            
            ctx.stroke();
        }

        // Clear canvas
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Set drawing styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // --- Main Drawing ---

        const centerX = 225;
        const centerY = 160;
        const radius = 80;

        // 1. Draw Magnetic Field Lines (B)
        const fieldLineY = [centerY - radius - 20, centerY - radius / 2, centerY + radius / 3, centerY + radius + 20];
        const fieldLineXStart = 20;
        const fieldLineXEnd = 430;
        
        fieldLineY.forEach(y => {
            drawArrow(ctx, fieldLineXStart, y, fieldLineXEnd, y, 12);
        });
        
        // 2. Draw the Circle (Disk)
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
        ctx.stroke();

        // 3. Draw the downward arrow
        const arrowStartY = fieldLineY[3]; // Start from the bottom field line
        drawArrow(ctx, centerX, arrowStartY, centerX, arrowStartY + 40, 12);
        
        // 4. Draw the dashed line for Radius (R)
        ctx.beginPath();
        ctx.setLineDash([6, 4]);
        const r_line_start_x = centerX - 15;
        const r_line_start_y = centerY + 20;
        const r_line_end_x = centerX - 55;
        const r_line_end_y = centerY + 60;
        ctx.moveTo(r_line_start_x, r_line_start_y);
        ctx.lineTo(r_line_end_x, r_line_end_y);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid lines

        // 5. Draw the labels
        // Label B
        ctx.font = 'bold 28px serif';
        ctx.fillText('B', fieldLineXEnd - 40, centerY + 25);
        
        // Label R
        ctx.font = 'italic 24px serif';
        ctx.fillText('R', centerX - 45, centerY + 50);

        // Bottom Caption
        ctx.font = '24px "SimSun", "Songti SC"'; // Standard Chinese font
        ctx.textAlign = 'center';
        ctx.fillText('电图 3.7.1', centerX, canvas.height - 30);

    </script>
</body>
</html>